/////////////// 动态渲染详情页商品数据///////////
$(document).ready(function(){
    var reg = /id=(\d+)/
    var arr = location.search.match(reg)
    if(!arr || !arr[1]) {
        layer.msg('非法访问！', {
            icon: 2,
            time: 2000
        }, function() {
            location.href = 'productList.html'
        })
    }

    var id = arr[1]
    // 发送ajax获取商品
    $.get('/api/getGoods', res => {
        res = JSON.parse(res)
        var data = res.data
        data = data.find(item => item.goods_id == id)
        console.log(data)
        var middleImg = document.createElement('img')
        middleImg.src = data.middle_img
        $('.middle').append($(middleImg))
        var bigImg = document.createElement('img')
        bigImg.src = data.middle_img
        $('.big').append($(bigImg))
        // 循环渲染小图片
        for(var key in data.small_img){
            var smallImg = document.createElement('img')
            smallImg.src = data.small_img[key]
            $('.small').append($(smallImg))
            // console.log(data.small_img[key])
             // tab切换
            $('.small img').click(function() {
                $(this).addClass('active').siblings().removeClass('active')
                $('.middle>img').attr('src', $(this).attr('src'))
                $('.big>img').attr('src', $(this).attr('src'))
            })
        }
        // 移入移出
        $('.middle').hover(function() {
            // $('.big').css('display', 'block')
            // $('.mask').css('display', 'block')

            $('.big').show()
            $('.mask').show()
            // 移动事件
            $('.middle').mousemove(function(e) {
                // 获取鼠标位置
                var x = e.pageX
                var y = e.pageY
                // left和top的计算
                var l = x - $('.mask').outerWidth()/2
                var t = y - $('.mask').outerHeight()/2
                // 对l和t限制
                if(l < $('.middle').offset().left + parseInt($('.middle').css('border-left-width'))) {
                    l = $('.middle').offset().left + parseInt($('.middle').css('border-left-width'))
                }
                if(t < $('.middle').offset().top + parseInt($('.middle').css('border-top-width'))) {
                    t = $('.middle').offset().top + parseInt($('.middle').css('border-top-width'))
                }

                if(l > $('.middle').offset().left + parseInt($('.middle').css('border-left-width')) + $('.middle').innerWidth() - $('.mask').outerWidth()) {
                    l = $('.middle').offset().left + parseInt($('.middle').css('border-left-width')) + $('.middle').innerWidth() - $('.mask').outerWidth()
                }
                if(t > $('.middle').offset().top + parseInt($('.middle').css('border-top-width')) + $('.middle').innerHeight() - $('.mask').outerHeight()) {
                    t = $('.middle').offset().top + parseInt($('.middle').css('border-top-width')) + $('.middle').innerHeight() - $('.mask').outerHeight()
                }
                // 设置
                $('.mask').offset({
                    left: l,
                    top: t
                })

                // 获取遮罩相对于中盒子的距离
                var l1 = $('.mask').position().left / $('.middle').innerWidth() * $('.big>img').width()
                var t1 = $('.mask').position().top / $('.middle').innerHeight() * $('.big>img').height()
                // console.log(l1,t1)
                $('.big>img').css({
                    left: -l1 + 'px',
                    top: -t1 + 'px'
                })
            })
        }, function() {
            // $('.big').css('display', 'none')
            // $('.mask').css('display', 'none')
            $('.big').hide()
            $('.mask').hide()
        })

        $('.sInfo-title').text(data.name)
        $('.sInfo-subtitle').text(data.title)
        $('.nowprice').text(data.price.cur_price)
        $('.oldprice').text(data.price.old_price)


        // console.log(data.gInfo_content)
        for(var key in data.gInfo_content){

            var gInfoContentImg=document.createElement('img')

            gInfoContentImg.src = data.gInfo_content[key]
            
            var gInfoContent = $(document.createElement('p')).append($(gInfoContentImg))

            $('.gInfo-content').append($(gInfoContent[0]))
            // console.log(data.small_img[key])
        }
        var str= `
        <div style="color:#999;text-align:left;padding:1rem;line-height: 1.6rem;">
            <h3 style="text-align: center;">价格说明</h3>
            未划线价：
            <br>
            商品的实时标价，具体成交价格根据商品参加活动或使用优惠券、积分等发生变化，最终以订单结算页价格为准。
            <br>
            划线价：
            <br>
            商品展示的划横线价格为该商品在360商城上曾经展示过的销售价，并非原价。
            <br>
            异常问题：
            <br>商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
            <br>*此价格说明仅在有价格对比时有效。
        </div>
        `
        $('.gInfo-content').html($('.gInfo-content').html()+str)

        // $('.goodsprice').text(data.price)
        // $('.desc').html(data.goodsdetail)
        ///////////// 注意：放大镜效果一定要在这里开启 /////////////
    })


        // 加入购物车
    // 加入购物车的本质：就是将当前商品数据存储起来，到购物车页面的时候，获取到存储的数据渲染到页面
    // 1.实际工作中：购物车数据是存储在数据库的
    // 2.存到本地存储中 - localStorage
    /*
    1.检测用户是否登录 - 未登录就强制跳转到登录页，登录后要跳转回来
    2.数据格式： [{}, {}]
    3.第一次是直接存，第二次读取，push，再存储
    4.读取本地存储是否有数据 - 没有数据直接存
    5.有数据，转成数组，
    6.判断数组中是否有当前这条数据 - 如果没有，push，然后再次重新存
    7.如果有，让这条数据的number数量++，重新存
    */

    $('.cart').click(function() {
        // 获取cookie
        var username = getCookie('username')
        if(!username) {
            layer.msg('请先登录', {
                icon: 2,
                time: 2000
            }, function() {
                // 现在实际项目中大部分网站都是这么做的
                // location.href = 'login.html?url=当前地址'

                // 在跳转之前将当前地址存储在本地存储中
                localStorage.setItem('url', location.href)
                location.href = 'login.html'
            })
        } else {
            // 读取本地存储中购物车数据
            var cartData = localStorage.getItem('cartData')
            if(!cartData) {
                cartData = [{
                    id: id,
                    number: 1,
                    username
                }]
                // 存cartData
            } else {
                cartData = JSON.parse(cartData)
                // 判断是否有当前用户丶当前商品数据
                var obj = cartData.find(item => item.username === username && item.id == id)
                if(!obj) {
                    cartData.push({
                        id: id,
                        number: 1,
                        username
                    })
                } else {
                    obj.number++
                }
                // 存cartData
            }
            localStorage.setItem('cartData', JSON.stringify(cartData))
            layer.msg('加入购物车成功', {
                icon: 1,
                time: 1500
            })
        }
    })





})
 
///////////////////获取cookie////////////////
$(document).ready(function(){
    window.onload = function() {
        // 获取cookie
        var username = getCookie('username')
        // 做判断
        if(username) {
            // 换内容
            // 获取标签
            var loginAndRegister = document.querySelector('.loginAndRegister');
            // 给标签设置内容
            loginAndRegister.innerHTML = `
            <a href="./personalData.html"><span>欢迎<b style="margin: 0 10px;">${username}</b></span></a>
                <a onclick="logout()" href="javascript:;">退出</a>
            `
        }
    }
     
})
function logout() {
    if(confirm('你确定要退出吗？')) {
        removeCookie('username')
        var loginAndRegister = document.querySelector('.loginAndRegister');
        loginAndRegister.innerHTML = `
            <a href="login.html">登录</a>
            <a href="register.html">注册</a>
        `
    }
}

////////////给window添加滚动事件///////////////////
$(document).ready(function(){
    window.onscroll = function() {
        // console.log('滚动了');
        // 获取滚动的距离
        // document.documentElement.scrollTop
        // 滚动距离有兼容问题，这种写法只适用于当前网页有文档声明的情况
        // var t = document.documentElement.scrollTop
    
        // 如果没有文档声明
        // var t = document.body.scrollTop
        // console.log(t);
    
        // 兼容写法
        // 短路运算
        var t = document.documentElement.scrollTop || document.body.scrollTop
        console.log(t);
        // if(t === 150) { // 滚动过的距离在获取过程中，如果动作稍微快一点，不会正好获取到这个值，所以条件应该修改
    
        if(t >= 400){
            // console.log(1);
            // 让回到顶部标签出来 - 给标签设置height
            $('.totop').css('height','20px')
        } else {
            $('.totop').css('height','0')
        }
    }
    
    $('.totop').click(function(){
        // 可以给滚动距离赋值，设置滚动条位置
        document.documentElement.scrollTop = 0
    })
    
})
